<template>
  <div class="app-container" style="background: #f5f6f9">
    <div style="" class="filter-box">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
        <div class="ch-d">
          <span>风险等级</span>
          <el-form-item label="" prop="assetName">
            <el-checkbox-group v-model="queryParams.pf" @change="getList">
              <el-checkbox label="一级"></el-checkbox>
              <el-checkbox label="二级"></el-checkbox>
              <el-checkbox label="三级"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div class="ch-d">
          <span>年检结果</span>
          <el-form-item label="" prop="annualInspectionCode">
            <el-checkbox-group v-model="queryParams.annualInspectionCode" @change="getList">
              <el-checkbox label="1">合格</el-checkbox>
              <el-checkbox label="2">基本合格</el-checkbox>
              <el-checkbox label="3">不合格</el-checkbox>
              <el-checkbox label="4">未参检</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <div class="ch-d">
          <span>综合评分</span>
          <el-form-item label="" prop="assetName">
            <el-radio-group v-model="queryParams.gtScore" @change="getList" size="large">
              <el-radio label="0">较差</el-radio>
              <el-radio label="1">达标</el-radio>
              <el-radio label="2">良好</el-radio>
              <el-radio label="3">优秀</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <!-- <div class="ch-d">
          <span>主管部门</span>
          <el-form-item label="" prop="assetName">
            <el-checkbox-group v-model="checkList2">
              <el-checkbox label="民政局"></el-checkbox>
              <el-checkbox label="公安局"></el-checkbox>
              <el-checkbox label="交通局"></el-checkbox>
              <el-checkbox label="市场监督管理局"></el-checkbox>
              <el-checkbox label="应急管理局"></el-checkbox>
              <el-checkbox label="人社局"></el-checkbox>
              <el-checkbox label="环保局"></el-checkbox>
              <el-checkbox label="卫健委"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div> -->
<!--        justify-content: end;-->
        <div style="display: flex;align-items: center;margin-top: 10px;margin-left: -10px;">
          <el-form v-model="queryParams"  label-width="80px">
            <el-form-item label="组织类型" prop="types" >
              <el-radio-group @change="getList" v-model="queryParams.types" is-button >
                <el-radio-button label="">所有</el-radio-button>
                <el-radio-button label="1">社团</el-radio-button>
                <el-radio-button label="2">民非</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="主管单位" prop="supervisoryCode">
              <el-select v-model="queryParams.supervisoryCode" placeholder="请选择" clearable @change="getList();">
                <el-option v-for="item in orgData" :key="item.deptId" :label="item.deptName" :value="item.deptId" />
              </el-select>
            </el-form-item>
            <el-form-item label="组织名称" prop="assetName">
              <el-input clearable style="width:200px;" v-model="queryParams.orgName"
                        placeholder="请输入组织名称" ></el-input>
            </el-form-item>
            <el-button type="primary" @click="getList" >查询</el-button>
            <el-button plain type="primary" @click="clearQuery" >重置</el-button>
          </el-form>
        </div>
      </el-form>
    </div>

    <div class="cot-box">
      <div class="result-num">
        <div>
          为您找到 <span style="color: red">{{ total }}</span> 条结果，
           综合评分达标率<span style="color: red">{{ complianceRate }}</span>
        </div>
        <div>
          <el-button type="primary" @click="toPoints" :loading="btnLoading">刷新评分</el-button>
        </div>
      </div>
      <div class="list-box">
        <ul>
          <li v-for="item in tableData" @click="toChart(item)">
            <div class="left-pic">
              <div :class="{ 'long-txt': item.orgName.length > 12 }">{{ item.orgName }}</div>
            </div>
            <div class="right-con">
              <div class="first-col" style="display: flex; align-items: center">
                <div class="name-tip" style="display: flex; align-items: center">
                  <p class="org-name">{{ item.orgName }}</p>
                  <div class="tip-btn">
                    <!-- <span class="hao">等级评估：AAA</span> -->
                    <!-- <span class="huang">信用-A类</span> -->
                    <!-- <span class="wei">违法3次</span> -->
                    <span class="wei" v-if="item.riskLevel">风险等级：{{ item.riskLevel }}</span>
                    <span class="pu">活动次数{{ item.activitySum }}次</span>
                    <span
                      :class="item.annualInspectionResult == '合格' ? 'hao' : item.annualInspectionResult == '基本合格' ? 'huang' : 'wei'">年检结果：{{
                        item.annualInspectionResult }}</span>
                    <!-- <span class="pu">总人数{{ item.totalPeoples || '0' }}人</span> -->
                    <span :title="innerItem.awardName" class="wei" v-for="innerItem in item.rewardLevel">
                      <MIcon name="danghui" v-if="item.partyOrganization == 1">
                        <img src="@/assets/menuIcon/jiangzhuang.svg" style="width: 16px;height: 16px;position: relative;
                        top: 3px;" class="iconImg" />
                      </MIcon>
                      {{ innerItem.awardName }}
                    </span>
                    <span :class="item.partyOrganization == 1 ? 'huang' : 'huang'">
                      <MIcon name="danghui" v-if="item.partyOrganization == 1">
                        <img src="@/assets/menuIcon/danghui2.svg" style="width: 14px;height: 13px;" class="iconImg" />
                      </MIcon>
                      {{ item.partyOrganization == 1 ? '建立党组织' : item.partyOrganization == 2 ?
                        '未建立党组织'
                        : '党组织未知' }}
                    </span>
                  </div>
                </div>
                <div class="point">
                  <p class="point-box">
                    <span>{{ item.score }}</span>
                    <span>分</span>
                    <el-tag style="margin-left: 10px;" :type="item.scoreLevel == '较差'?'danger':item.scoreLevel == '达标'?'warning':item.scoreLevel == '良好'?'primary':'success'">{{item.scoreLevel}}</el-tag>
                  </p>
                  <p class="yj-btn">
                    <el-button type="text" :icon="View" @click.stop="handleCheck(item)">得分依据</el-button>
                  </p>
                </div>
              </div>
              <div class="second-col">
                <div>类型：
                  <el-tag :type="item.types == 1 ? 'warning' : ''">
                    <span class="tag">{{
                      item.types == 1 ? '社团' : '民非'
                    }}</span>
                  </el-tag>
                </div>
                <div>法定代表人：{{ item.legalPerson }}</div>
                <div>主管部门：{{ item.competentDept }}</div>
                <div>法人联系电话：{{ item.phone }}</div>
                <div>类型：{{ item.industryType }}</div>
                <div>总人数：{{ item.totalPeoples || 0 }}人</div>
              </div>
              <div class="three-col">
                地址：{{ item.address }}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="pageInfo-box">
      <el-pagination v-model:current-page="queryParams.pageNum" :page-sizes="[100, 200, 300, 400]" background
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="getList" />
    </div>

    <el-dialog title="得分依据" v-model="dialogPoint" width="1000px" top="4vh" append-to-body>
      <div class="pop-box">
        <p class="org-name" style="margin-top: 5px;">
          {{ currentRow.orgName }}
        </p>
            <p class="finally-point">评分：{{ currentRow.score }}</p>
            <el-table show-summary :summary-method="totalOutPrice" border :data="currentRow.scoreRecords"  align="center">
              <el-table-column align="center" type="index" label="序号" width="80" />
              <el-table-column align="center" prop="name" label="评价类型" />
              <el-table-column align="center" prop="maxScore" label="评价分值" />
              <el-table-column align="center" prop="ruleName" label="评价结果"  />
              <el-table-column align="center" prop="score" label="评价得分">
                <template #default="scope">
                  <span :style="{ color: scope.row.score > 0 ? 'red' : 'green' }">{{ scope.row.score }}</span>
                </template>
              </el-table-column>
            </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listFile } from '../fileData.js'
import { getPortraitList, setPoint } from '@/api/evaluate/index'
import { getTree } from '@/api/systemSetting/personnel'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  data() {
    return {
      goodsArr: ['年检全部合格', '四星及以上', '综合评分80以上'],
      checkList1: [],
      checkList2: [],
      dialogTableVisible: false,
      mFileList: listFile,
      dialogVisible: false,
      dialogPoint: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: '1',
        pageSize: '10',
        orgName: '',
        gtScore:undefined,
        types: '',
        supervisoryCode:undefined,
        annualInspectionCode: [],
      },
      tableData: [],
      total: 0,
      complianceRate: 0,
      btnLoading: false,
      currentRow: {},
      orgData: []
    }
  },
  created() {
    this.getList()
    getTree({ remark: 'zgdw' }).then((res) => {
      this.orgData = res.data
    })
  },
  methods: {
    totalOutPrice(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 1) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (column.property != 'ruleName') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        }
      });
      return sums
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.assetId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleClick(row) {
      this.$message.success('审核完成')
    },
    typeFormat(row) {
      let state = row.data6
      if (state == '合格') {
        return 'success'
      } else if (state == '待定') {
        return 'danger'
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    openDialog() {
      this.dialogVisible = true
    },
    handleCheck(row) {
      this.dialogPoint = true
      this.currentRow = row
    },
    tableRowClassName(row, rowIndex) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    clearQuery(){
      this.queryParams = {
        pageNum: '1',
        pageSize: '10',
        orgName: '',
        types: '',
        gtScore:undefined,
        supervisoryCode:undefined,
        annualInspectionCode: [],
      }
      this.getList();
    },
    getList() {
      this.tableData = []
      // this.queryParams.gtScore = this.gtScore.sort((a, b) => a - b).join()
      getPortraitList({
        ...this.queryParams
      }).then(res => {
        this.tableData = res.data.rows.map(item => {
          // console.log(item.scoreRecords)
          return {
            ...item,
            scoreRecords: [...JSON.parse(item.scoreRecords)],
            rewardLevel: item.rewardLevel ? JSON.parse(item.rewardLevel) : [],
          }
        })
        this.total = res.data.total
        this.complianceRate = res.data.complianceRate
        console.log(this.tableData)
      })
    },
    toPoints() {
      this.btnLoading = true
      setPoint().then(res => {
        setTimeout(() => {
          this.btnLoading = false,
            ElMessage({
              message: '评分成功',
              type: 'success'
            })
          this.getList()
        }, 1000)
      })
    },
    toChart(item) {
      this.$router.push({ path: '/evaluateLargeScreen', query: { creditCode: item.socialCode } });
    }
  }
}
</script>
<style scoped>
::v-deep .el-form-item {
  margin-bottom: 0 !important;
}

::v-deep .el-select .el-input {
  //height: 40px;
}

::v-deep .el-checkbox__label {
  font-size: 14px !important;
}

.el-table__body td {
  cursor: pointer;
}

.filter-box {
  /* width: 1500px; */
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;

  .ch-d {
    display: flex;
    height: 40px;

    >span {
      margin-right: 10px;
      margin-top: 10px;
      width: 100px;
    }
  }
}

.cot-box {
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;

  .result-num {
    border-bottom: 2px solid #f5f6f9;
    height: 40px;
    display: flex;
    justify-content: space-between;
  }

  .list-box {
    ul {
      li {
        display: flex;
        transition: box-shadow 0.3s;
        border-bottom: 1px solid #f3f3f3;
        height: 170px;
        padding: 20px;

        &:hover {
          box-shadow: 0 4px 5px -3px rgba(0, 0, 0, 0.06),
            0 4px 12px 4px rgba(0, 0, 0, 0.06);
        }

        .left-pic {
          width: 100px;
          height: 100px;
          margin-right: 20px;
          font-size: 18px;
          letter-spacing: 2px;
          line-height: 24px;
          padding: 8px;
          background-color: #d1ae9d;
          border-radius: 4px;
          margin-top: 20px;

          >div {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
            position: relative;
            text-align: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 100%;
            color: #fff;
            font-size: 25px;
            letter-spacing: 4px;
            line-height: 30px;

            &.long-txt {
              font-size: 16px;
            }
          }
        }

        .right-con {
          flex: 1;

          .first-col {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            width: 100%;
            justify-content: space-between;

            .name-tip {
              display: flex;
              align-items: center;

              .org-name {
                font-size: 20px;
                font-weight: bold;
                margin: 0;
              }

              .tip-btn {
                font-size: 14px;
                margin-left: 20px;

                >span {
                  margin-right: 10px;
                  max-width: 250px;
                  display: inline-block;
                  white-space: nowrap;
                  /* 防止文本换行 */
                  overflow: hidden;
                  /* 隐藏超出部分 */
                  text-overflow: ellipsis;
                  /* 显示省略号 */
                }

                .wei {
                  color: #f0667f;
                  padding: 5px 10px;
                  background: rgba(240, 102, 127, 0.1);
                }

                .huang {
                  color: #e6a23c;
                  padding: 5px 10px;
                  background: #fdf6ec;
                }

                .pu {
                  color: #0084ff;
                  padding: 5px 10px;
                  background: #e8f4ff;
                }

                .hao {
                  color: #089944;
                  padding: 5px 10px;
                  background: #e9fcf1;
                }
              }
            }

            .point {
              position: relative;

              p.point-box {
                span {
                  &:nth-child(1) {
                    font-size: 26px;
                  }

                  &:nth-child(2) {
                    font-size: 20px;
                  }
                }
              }

              p.yj-btn {
                position: absolute;
              }
            }
          }

          .second-col {
            display: flex;
            color: #666;
            margin-bottom: 20px;

            >div {
              margin-right: 100px;
            }
          }

          .three-col {
            display: flex;
            color: #666;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 5px;
  padding-bottom: 10px;
}

.pop-box {
  .org-name {
    text-align: center;
    font-size: 26px;
  }
}

.point-content {
  display: flex;
  justify-content: space-between;

  >div {
    width: 100%;
  }

  .left-point {
    .point-itemize {
      p.point-list {
        font-size: 18px;
        height: 40px;
        line-height: 40px;
      }
    }

    .finally-point {
      font-size: 26px;
      text-align: center;
    }
  }

  .right-chart {
    height: 400px
  }
}

.el-table .warning-row {
  background-color: #089944;
}

.el-table .success-row {
  background-color: #089944;
}
</style>
